<template>
  <div class="mainBox">
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <i class="el-icon-document"></i>
          <div>
            <p style="color: #cdcdcd">总订单</p>
            <p style="margin-top: 5px; font-weight: bold">{{ totalOrder }}</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <i class="el-icon-files"></i>
          <div>
            <p style="color: #cdcdcd">总销售额</p>
            <p style="margin-top: 5px; font-weight: bold">{{ totalAmount }}</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <i class="el-icon-document"></i>
          <div>
            <p style="color: #cdcdcd">今日订单单数</p>
            <p style="margin-top: 5px; font-weight: bold">{{ todayOrder }}</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <i class="el-icon-refrigerator"></i>

          <div>
            <p style="color: #cdcdcd">今日销售额</p>
            <p style="margin-top: 5px; font-weight: bold">{{ totayAmount }}</p>
          </div>
        </div></el-col
      >
    </el-row>

    <div id="myid">统计表</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { totaldata } from "@/apis/echarts";
export default {
  data() {
    return {
      totalOrder: "",
      totalAmount: "",
      todayOrder: "",
      totayAmount: "",
    };
  },
  mounted() {
    //发送请求
    totaldata().then((res) => {
      this.totalOrder = res.data.totalOrder;
      this.totalAmount = res.data.totalAmount;
      this.todayOrder = res.data.todayOrder;
      this.totayAmount = res.data.totayAmount;
      console.log(res);
      let mychart = echarts.init(document.getElementById("myid"));
      mychart.setOption({
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["金额数据", "订单数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "金额数据",
            type: "line",
            stack: "总量",
            data: res.data.amountData,
          },
          {
            name: "订单数量",
            type: "line",
            stack: "总量",
            data: res.data.orderData,
          },
        ],
      });
    });
  },
};
</script>

<style lang="less">
#myid {
  width: 100%;
  height: 400px;
  margin-top: 30px;
}
.el-main[data-v-fae5bece] {
  line-height: 20px;
  text-align: left;
}
.grid-content {
  display: flex;
  justify-content: space-around;
  min-width: 200px;
  align-items: center;

  padding: 20px 0;
}
.el-row {
  display: flex;
  // height: 100px;
  flex-wrap: nowrap;
}

.el-col {
  margin-left: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.el-card {
  background-color: #f0f2f5;
}
.el-icon-files {
  font-size: 60px;
  color: #db458e;
}
.el-icon-document {
  font-size: 60px;
  color: #1296db;
}
.el-icon-refrigerator {
  font-size: 60px;
  color: #4efb59;
}
</style>